<template>
  <div style="margin-top:30px;">
    <!--查询-->
    <el-form :inline="true"  class="demo-form-inline">
      <el-form-item label="模板id：">
        <el-input v-model="model_id" > </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchData">查询</el-button>
        <el-button  type="primary" @click="ldyList()">模板列表</el-button>
      </el-form-item>
    </el-form>
    <!--预览-->
    <div class="view">
      <div  v-for="(item, index) in uploadData.modules"
            :key="index"
            :index="index"
            :item="item">
        <div  v-if="item.module_type==1" class="download header" style="height:124px; ">
          <a class="appDownload" href="">
            <img :src="item.resource_url" >
          </a>
        </div>
        <div  v-if="item.module_type==2" class="main">
          <aside>
            <a class="appDownload" style="display:block!important;" href="">
              <img :src="item.resource_url">
            </a>
          </aside>
        </div>
        <div  v-if="item.module_type==3" class="video_box" style="max-width: 750px;">
          <video :src="item.resource_url" autoplay="" muted="" loop="" playsinline="true" webkit-playsinline="true">
          </video>
        </div>
        <div  v-if="item.module_type==4" class="main swiper"
              :style="{'height':item.bg_height+'px','background-image':'url('+item.resource_bg_url+')','background-size':'100%'}">
          <div class="example-3d">
            <swiper class="swiper" :options="swiperOption" :style="{'height':item.bg_height+'px'}">
              <swiper-slide
                v-for="(obj, index) in item.resource_url.split('|')"  :key="index"
                :style="{'height':item.height+'px!important','background-image':'url('+obj+')'}"
                >

              </swiper-slide>

              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
          </div>
        </div>
      </div>
      <div class="footer" style="width:750px;margin:0 auto;text-align: center;font-size:30px;line-height:125px;"
           :style="{'background-color':uploadData.bottom_text_bg_color,'color':uploadData.bottom_text_color}">
        襄阳沃众昌环保科技有限公司
      </div>
    </div>
    <!--修改表格-->
    <el-form inline label-position="right" label-width="120px" style="margin: 50px 0 0 0;max-width:1300px;">
      <el-row :xl="24" :lg="24" :xs="24" :gutter="10">
        <el-col :lg="4" :sm="4" :xs="24">
          <el-menu
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            @select="handleSelect"
            >
            <el-menu-item index="1">
              <i class="el-icon-picture"></i>
              <span slot="title">添加预览图</span>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-picture"></i>
              <span slot="title">添加顶部图</span>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-picture"></i>
              <span slot="title">添加单图组件</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-camera"></i>
              <span slot="title">添加视频组件</span>
            </el-menu-item>
            <el-menu-item index="5">
              <i class="el-icon-menu"></i>
              <span slot="title">添加轮播组件</span>
            </el-menu-item>

          </el-menu>
        </el-col>
        <el-col :lg="8" :sm="10" :xs="24">
          <el-form-item label="模板id："  v-if="uploadData.id">
            <el-input v-model="uploadData.id" > </el-input>
          </el-form-item>
          <el-form-item label="模板名：" v-if="uploadData.id">
            <el-input v-model="uploadData.model_name" > </el-input>
          </el-form-item>
          <el-form-item label="模板类型：" v-if="uploadData.category">
            <el-select
              v-model="uploadData.category_name"
              @change="chooseCategory"
              placeholder="请选择模板类型"
              style="width:200px;"
              >
              <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="顶部图标题：">
            <el-input v-model="uploadData.title" > </el-input>
          </el-form-item>
          <el-form-item label="标题字颜色：">
            <el-input v-model="uploadData.title_text_color" > </el-input>
          </el-form-item>
          <el-form-item label="标题字大小：">
            <el-input v-model="uploadData.title_text_size" > </el-input>
          </el-form-item>
          <el-form-item label="底部背景色：" v-if="uploadData.bottom_text_bg_color">
            <el-input v-model="uploadData.bottom_text_bg_color"> </el-input>
          </el-form-item>
          <el-form-item label="底部文字颜色：" v-if="uploadData.bottom_text_color">
            <el-input v-model="uploadData.bottom_text_color"> </el-input>
          </el-form-item>
          <el-form-item label="预览截图："  v-if="uploadData.view_img">
            <div>
              <img :src="uploadData.view_img" alt="" style="width:100px;">
            </div>
          </el-form-item>
          <el-form-item label="预览截图链接："  v-if="uploadData.view_img">
            <el-button type="primary" size="mini"><a target="_blank" :href="uploadData.view_img">点击查看</a></el-button>
            <el-button type="primary" size="mini" @click="modify(1)">修改</el-button>
            <el-button type="primary" size="mini" @click="delPreview('view_img')">删除</el-button>
          </el-form-item>
        </el-col>
        <el-col :lg="8" :sm="10" :xs="24" id="assembly">
          <el-form-item
            v-for="(item, index) in uploadData.modules"
            :key="index"
            :index="index"
            :item="item"
            >
            <!--v-if="item.module_type!=1">-->
            <div v-if="item.module_type==1">
              顶部图：
              <div>
                <img :src="item.resource_url" alt="" style="width:100px;">
              </div>
              <div v-if="item.resource_url">
                <el-button type="primary" size="mini"><a target="_blank" :href="item.resource_url">点击查看</a></el-button>
                <el-button type="primary" size="mini" @click="modify(2)">修改</el-button>
                <el-button type="primary" size="mini" @click="delBanner(item.index,item.resource_url)">删除</el-button>
              </div>
            </div>
            <div v-if="item.module_type==2">
              {{item.index}}、单图：
              <div>
                <img :src="item.resource_url" alt="" style="width:100px;">
              </div>
              <el-button type="primary" size="mini"><a target="_blank" :href="item.resource_url">点击查看</a></el-button>
              <el-button type="primary" size="mini" @click="modify(3,item.index)">修改</el-button>
              <el-button type="primary" size="mini" @click="delModule(item.index,item.resource_url)">删除</el-button>
            </div>
            <div v-if="item.module_type==3">
              {{item.index}}、视频：{{item.resource_url}}
              <el-button type="primary" size="mini"><a target="_blank" :href="item.resource_url">点击查看</a></el-button>
              <el-button type="primary" size="mini" @click="modify(4,item.index)">修改</el-button>
              <el-button type="primary" size="mini" @click="delModule(item.index,item.resource_url)">删除</el-button>
            </div>
            <div v-if="item.module_type==4">
              {{item.index}}、轮播
              <div>
                轮播背景图:
                <div>
                  <img :src="item.resource_bg_url" alt="" style="width:100px;">
                </div>
                <el-button type="primary" size="mini" v-if="item.resource_bg_url"><a target="_blank" :href="item.resource_bg_url">点击查看</a></el-button>
                <div>轮播背景图高：{{item.bg_height}}</div>
              </div>
              <div>
                轮播图列表:
                <div>
                  <div style="display:inline-block" v-for="(obj, index) in item.resource_url.split('|')"  :key="index">
                    <img :src="obj" alt="" style="width:100px;">
                    <el-button type="primary" size="mini"><a target="_blank" :href="obj">点击查看</a></el-button>
                  </div>
                </div>


                <div>轮播图高：{{item.height}}</div>
                <el-button type="primary" size="mini" @click="modify(5,item.index)">修改</el-button>
                <el-button type="primary" size="mini" @click="delModule(item.index,item.resource_url)">删除</el-button>
              </div>
            </div>
          </el-form-item>

        </el-col>
      </el-row>
      <el-row>
        <el-col style="text-align: center;">
          <el-button  type="primary" @click="submit" v-if="uploadData.id"> 提交 </el-button>
          <el-button  type="primary" v-if="model_id"><a target="_blank"  :href="'http://p.2217wy.com/pages/view/' + model_id + ''" >查看</a></el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- 添加预览图弹窗 -->
    <el-dialog
      :modal-append-to-body="false"
      :top="userAgent ? '60px' : '15vh'"
      title="添加预览图"
      :visible.sync="dialogPreview"
      :width="dialogWidth"
      >
      <div class="wid-100">
        <el-form class="wid-100" label-width="120px" inline>
          <my-ldyPreview
            ref="preview"
            :index="index"
            @getUrl="getViewImgUrl">
          </my-ldyPreview>
        </el-form>
      </div>
        <span slot="footer" class="dialog-footer">
        </span>
    </el-dialog>
    <!-- 添加顶部图弹窗 -->
    <el-dialog
      :modal-append-to-body="false"
      :top="userAgent ? '60px' : '15vh'"
      title="添加顶部图"
      :visible.sync="dialogBanner"
      :width="dialogWidth"
      >
      <div class="wid-100">
        <el-form class="wid-100" label-width="120px" inline>
          <my-ldyBanner
            ref="banner"
            :index="index"
            @getUrl="getHeaderImgUrl">
          </my-ldyBanner>
        </el-form>
      </div>
        <span slot="footer" class="dialog-footer">
        </span>
    </el-dialog>
    <!-- 添加单图弹窗 -->
    <el-dialog
      :modal-append-to-body="false"
      :top="userAgent ? '60px' : '15vh'"
      title="添加单图"
      :visible.sync="dialogPicture"
      :width="dialogWidth"
      >
      <div class="wid-100">
        <el-form class="wid-100" label-width="120px" inline>
          <my-ldyImage
            ref="image"
            :index="index"
            @getUrl="getResUrl">
          </my-ldyImage>
        </el-form>
      </div>
        <span slot="footer" class="dialog-footer">
        </span>
    </el-dialog>
    <!-- 添加视频弹窗 -->
    <el-dialog
      :modal-append-to-body="false"
      :top="userAgent ? '60px' : '15vh'"
      title="添加视频"
      :visible.sync="dialogVideo"
      :width="dialogWidth"
      >
      <div class="wid-100">
        <el-form class="wid-100" label-width="120px" inline>
          <my-ldyVideo
            ref="video"
            :index="index"
            @getUrl="getResUrl">
          </my-ldyVideo>
        </el-form>
      </div>
        <span slot="footer" class="dialog-footer">
        </span>
    </el-dialog>
    <!-- 添加轮播弹窗 -->
    <el-dialog
      :modal-append-to-body="false"
      :top="userAgent ? '60px' : '15vh'"
      title="添加轮播"
      :visible.sync="dialogSlider"
      :width="dialogWidth"
      >
      <div class="wid-100">
        <el-form class="wid-100" label-width="120px" inline>
          <my-ldySlider
            ref="slider"
            :index="index"
            @getUrl="getResUrl">
          </my-ldySlider>
        </el-form>
      </div>
        <span slot="footer" class="dialog-footer">
        </span>
    </el-dialog>
  </div>
</template>
<script>
//  import ldyUpload from "@/views/market/ldy/ldyUpload.vue";
  import ldyPreview from "@/views/market/ldy/preview.vue";
  import ldyBanner from "@/views/market/ldy/banner.vue";
  import ldyImage from "@/views/market/ldy/image.vue";
  import ldyVideo from "@/views/market/ldy/video.vue";
  import ldySlider from "@/views/market/ldy/slider.vue";

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
export default {
  data() {
    return {
      model_id:"",
      //模板类型列表
      categoryList:[],
      uploadData:{},
//      计uploadData.modules里的模块数
      moduleLength:0,
      index:0,
      dialogPreview: false,
      dialogBanner: false,
      dialogPicture: false,
      dialogVideo: false,
      dialogSlider: false,
//      dialogWidth: 0,
      swiperOption: {
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
        coverflowEffect: {
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows : true
        },
        pagination: {
          el: '.swiper-pagination'
        }
      }
    };
  },

  components: {
//      "my-ldyUpload": ldyUpload,
      "my-ldyPreview": ldyPreview,
      "my-ldyBanner": ldyBanner,
      "my-ldyImage": ldyImage,
      "my-ldyVideo": ldyVideo,
      "my-ldySlider": ldySlider,
      Swiper,
      SwiperSlide,
  },
  computed:{
    dialogWidth() {
//      console.log(document.body.clientWidth)
      var val = document.body.clientWidth;
      const def = 620; // 默认宽度
      if (val < def) {
        return "100%";
      } else {
        return (def + "px");
      }
    },
  },
  created() {
  },
  mounted() {
    this.model_id = this.$route.query.model_id;
    console.log(this.$route.query.model_id);
    this.getData();
    this.getCategoryList();

  },
  methods: {
    //去模板列表模板
    ldyList(){
      const vm = this;
      vm.$router.push({name: 'ldyList'})

    },
    setDialogWidth() {
      //console.log(document.body.clientWidth)
      var val = document.body.clientWidth;
      const def = 620; // 默认宽度
      if (val < def) {
        this.dialogWidth = "100%";
      } else {
        this.dialogWidth = def + "px";
      }
    },
    // 获取模板类型
    getCategoryList(){
      return new Promise((resolve, reject) => {
          let queryObj = {
            //token: this.mob_token,
            key: 'game_category',
          };
          this.$api.wyChoices(queryObj).then((res) => {
            if (res.code == "0") {
            this.categoryList=res.data;
            //console.log(this.categoryList);
          }
        });
      });
    },
    //选择模板类型
    chooseCategory() {
      console.log(this.uploadData.category_name);
    },
    // 复制链接方法
    onCopy(e) {
      this.$message.success("复制成功");
    },
    onError(e) {
      this.$message.warning("该浏览器不支持自动复制");
    },
    searchData(){
      this.getData();
    },
    getData() {
      if(this.model_id!=""){
        return new Promise((resolve, reject) => {
            let queryObj = {
              id: this.model_id,
            };
            this.$api.ldyList(queryObj).then((res) => {
              if (res.code ==200) {
              this.uploadData=res.items[0]
              this.moduleLength=this.uploadData.modules.length
              this.model_id = this.uploadData.id;
            }
          });
        });
      }else{
          alert("请输入模板id查询后修改~")
      }

    },
    // 菜单操作
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  //新增组件
    handleSelect(key, keyPath) {
      //console.log(key==1);
      //this.index++
      if(this.uploadData.modules.length==0){
        this.index=1;
      }else{
        this.index=this.uploadData.modules.length;
      }
      if(key==1){
        this.dialogPreview = true;
      }else if(key==2){
        this.dialogBanner = true;
      }else if(key==3){
        //this.imgList.push({ num:this.index });
        this.dialogPicture = true;
      }else if(key==4){
        //this.videoList.push({ num:this.index });
        this.dialogVideo = true;
      }else if(key==5){
        //this.sliderList.push({ num:this.index });
        this.dialogSlider = true;
      }
    },
//修改
    modify(key,num){
      if(key==1){
        this.dialogPreview = true;
      }else if(key==2){
        this.dialogBanner = true;
      }else if(key==3){
        this.index=num;
        this.dialogPicture = true;
      }else if(key==4){
        this.index=num;
        this.dialogVideo = true;
      }else if(key==5){
        this.index=num;
        this.dialogSlider = true;
      }
    },
//  预览图修改
    getViewImgUrl(data) {
      console.log(data);
      this.dialogPreview=false;
      this.uploadData.view_img=data;
      console.log(this.uploadData);
    },
    //删除预览图
    delPreview(k){
      //console.log(k);
      this.$confirm(`确定删除吗？`).then(() => {
        for (var key in this.uploadData) {
          //console.log(key);     //获取key值
          if(key==k){
            this.uploadData[key] = '';
          }
          //console.log(this.uploadData[key]); //获取对应的value值
        }
        console.log(this.uploadData);
      }).catch(() => {

      });
    },
  //  顶部图修改
    getHeaderImgUrl(data) {
      console.log(data);
      this.dialogBanner=false;
    //      修改
    if(this.uploadData.modules.length>data.index){
      for(var i = 0; i <this.uploadData.modules.length; i++) {
        if(this.uploadData.modules[i].index == 0) {
          this.uploadData.modules[i].resource_url=data.resource_url;
        }
      }
    }else{
//      添加
      this.uploadData.modules.push(data);
    }

      console.log(this.uploadData);
    },
  //删除顶部图
  delBanner(num,src){
      //console.log(num);
      //console.log(src);
      // console.log(this.uploadData.modules);
      this.$confirm(`确定删除吗？`).then(() => {
        var  modules= this.deepCopy(this.uploadData.modules);
        for(var i = 0; i <modules.length; i++) {
          if(modules[i].resource_url == src) {
            modules[i].resource_url='';
          }
        }
        this.uploadData.modules=modules;
        console.log(this.uploadData.modules);
      }).catch(() => {

      });
    },
  // 单图，视频和轮播组件返回的数据
    getResUrl(data) {
      this.resData = this.deepCopy(data);
    //      console.log(this.resData);
      console.log(data.resource_url);
      console.log(this.uploadData.modules);
//      修改
      if(this.uploadData.modules.length>data.index){
//        除轮播图外
        if(data.module_type!="4"){
          for(var i = 0; i <this.uploadData.modules.length; i++) {
            if(this.uploadData.modules[i].index == data.index) {
              this.uploadData.modules[i].resource_url=data.resource_url;
            }
          }
        }else{
//          轮播图修改
          for(var i = 0; i <this.uploadData.modules.length; i++) {
            if(this.uploadData.modules[i].index == data.index) {
              this.uploadData.modules.splice(i, 1);
              this.uploadData.modules.push(this.resData);

            }
          }
        }

      }else{
//        添加
        this.uploadData.modules.push(this.resData);
      }


      if(data.module_type=="2"){
        this.dialogPicture=false;
      }else if(data.module_type=="3"){
        this.dialogVideo=false;
      }else if(data.module_type=="4"){
        this.dialogSlider=false;
      }
      console.log(this.uploadData);
    },
    //删除单图、视频或者轮播
    delModule(num,src){
      console.log(num);
      //console.log(src);
        this.$confirm(`确定删除吗？`).then(() => {
          var  modules= this.deepCopy(this.uploadData.modules);
          //console.log(modules);
          for(var i = 0; i < modules.length; i++) {
            //删除项前面的index属性值-1
            console.log(modules[i].index);
            if(modules[i].index> num) {
              modules[i].index=parseInt(modules[i].index)-1;
            }
            if(modules[i].resource_url == src) {
              modules.splice(i, 1);
              i=i-1;
            }
          }
          this.uploadData.modules=modules;
          console.log(this.uploadData.modules);
      }).catch(() => {

      });

    },

  deepCopy(obj) {
      //数组的深拷贝
      let temp = obj.constructor === Array ? [] : {};
      for (let val in obj) {
        temp[val] =
          typeof obj[val] == "object" ? this.deepCopy(obj[val]) : obj[val];
      }
      return temp;
    },
    submit() {
      const vm = this;
      return new Promise((resolve, reject) => {
          this.$api.modifyLdy(this.uploadData).then((res) => {
              if (res.code == "0") {
              console.log(res);
//              alert("修改成功~")
              this.$message({
                message: '修改成功~',
                type: 'success'
              });
              vm.$router.push({name: 'ldyList'})
            }
          });
      });
    },
  },
};
</script>
<style>
  @import 'static/view.css';
  /*@import 'http://sstatic.2217.com/h5static/promotion/common/css/swiper.min.css';*/
a{
  text-decoration: none;
  color: #fff;
}
</style>
